<template>
  <div>
    <div class="header">
      <div class="vertical"></div>
      <span class="txt">待办事项</span>
    </div>
    <div class="active-header">
      <span><span class="block" style="background-color: #aadcbe"></span>完成</span>
      <span><span class="block" style="background-color: #edad6d"></span>今日待处理</span>
      <span><span class="block" style="background-color: #e78a8b"></span>未完成/延期</span>
    </div>
    <el-calendar v-model="value" :first-day-of-week="7">
      <template slot="dateCell" slot-scope="{ date, data }">
        <div ref="config" class="date-content" @click="time(date, data)">
          <div id="text">{{ getDay(date) }}</div>
          <div class="dots">
            <!-- <i v-show="isweekend(data)" class="rest">.</i> -->
            <div v-show="isweekend(data, 1)" class="rest" style="background-color: #aadcbe"></div>
            <div v-show="isweekend(data, 0)" class="rest" style="background-color: #edad6d"></div>
            <div v-show="isweekend(data, 2)" class="rest" style="background-color: #e78a8b"></div>
          </div>
        </div>
      </template>
    </el-calendar>
  </div>
</template>

<script>
import { currentMonthDays } from "@/util/util";
export default {
  props: {
    backLogList: {
      type: Array,
    },
  },

  data() {
    return {
      value: new Date(),
      nowDate: currentMonthDays(),
    };
  },
  methods: {
    // 给打卡时间传送参数
    time(date, data) {
      this.$emit("num", data.day);
    },
    // 获取日历日期
    getDay(date) {
      return date.getDate();
    },
    // 判断啥时候显示红点
    isweekend(data, status) {
      let item = this.backLogList.find((m) => m.date == data.day)?.dataList.find((m) => m.status == status);
      if (item) {
        return true;
      }
      return false;
    },

    doHandleZero(zero) {
      var date = zero;
      if (zero.toString().length == 1) {
        date = "0" + zero;
      }
      return date;
    },
    getDate() {
      var myDate = new Date();
      var tYear = myDate.getFullYear();
      var tMonth = myDate.getMonth();
      tMonth = this.doHandleZero(tMonth + 1);
      const dk = tYear + "-" + tMonth + "-01";
    },
  },
  created() {
    this.getDate();
  },
  mounted() {
    // this.$nextTick(() => {
    //   // 点击前一个月
    //   let prevBtn = document.querySelector(".el-calendar__button-group .el-button-group>button:nth-child(1)");
    //   prevBtn.addEventListener("click", () => {
    //     let a = this.value.getFullYear();
    //     let d = this.value.getMonth() + 1;
    //     d = (d < 10 ? "0" : "") + d;
    //     let i = this.value.getDate();
    //     i = (i < 10 ? "0" : "") + i;
    //   });
    // });
    // this.$nextTick(() => {
    //   // 点击后一个月
    //   let prevBtn = document.querySelector(".el-calendar__button-group .el-button-group>button:last-child");
    //   prevBtn.addEventListener("click", () => {
    //     if (this.value > new Date()) {
    //       this.value = new Date();
    //     }
    //     let a = this.value.getFullYear();
    //     console.log(a);
    //     let d = this.value.getMonth() + 1;
    //     d = (d < 10 ? "0" : "") + d;
    //     console.log(d);
    //     let i = this.value.getDate();
    //     i = (i < 10 ? "0" : "") + i;
    //     console.log(i);
    //   });
    // });
  },
};
</script>

<style lang="less" scoped>
.date-content,
.date-content2 {
  display: flex;
  justify-content: center;
  flex-flow: column;
  align-items: center;
  line-height: 20px;
}
.is-selected {
  color: red;
}
.dots {
  display: flex;
  justify-content: space-around;
  width: 29%;
  .rest {
    width: 5px;
    height: 5px;
    border-radius: 5px;
  }
}
:deep( .el-calendar__button-group) {
  width: 100%;
  height: 100%;
}
:deep(.el-button-group) {
  font-size: 15px;
  display: flex;
  justify-content: space-between;
}
:deep(.el-button) {
  border: none;
  background-color: #fff;
  position: relative;
}
:deep( .el-calendar__header .el-calendar__title) {
  width: 86px;
  position: absolute;
  right: 80px;
  top: -35px;
  font-size: 12px;
  color: #666;
}
:deep(.el-button:nth-child(1)) {
  position: absolute;
  right: 193px;
  padding: 0 !important;
  top: -34px;
}
:deep(.el-button:nth-last-child(1) ){
  width: 3px;
  position: absolute;
  right: 90px;
  // bottom: 6px;
  top: -34px;
  padding: 0 !important;
}
:deep(.el-calendar__header) {
  position: relative;
  bottom: 20px;
  padding: 0;
  border: none;
}

:deep(.el-button--plain:last-child span) {
  display: none;
}
// :deep(.el-button-group::after,
// .el-button-group::before {
//   content: unset;
// }

:deep(.el-button-group > .el-button:not(:first-child):not(:last-child)) {
  position: absolute;
  right: 0;
  top: -40px;
  color: #4e8dda;
  font-size: 12px;
  // display: none;
}

:deep(.el-button-group > .el-button:first-child) {
  &::before,
  &::after {
    border: 6px solid transparent;
    border-right: 7px solid #666;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: -20px;
    content: " ";
  }
  &::before {
    border-right-color: #fff;
    z-index: 1;
    right: -21px;
  }
}

:deep(.el-button-group > .el-button:last-child) {
  &::before,
  &::after {
    border: 6px solid transparent;
    border-left: 7px solid #666;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: -20px;
    content: " ";
  }
  &::before {
    border-left-color: #fff;
    z-index: 1;
    right: -19px;
  }
}

:deep( .el-button-group > .el-button:first-child span,
.el-button-group > .el-button:last-child span) {
  display: none;
}

:deep(.el-calendar__body) {
  padding: 10px 10px;
  height: 100%;
}
:deep(.el-calendar-table .el-calendar-day) {
  padding: 0;
  height: 28px;
  // width: 36px;
  line-height: 28px;
  text-align: center;
  position: relative;
  background-color: #fff;
}
// 日历单元格鼠标经过背景色
:deep(.el-calendar-table .el-calendar-day:hover) {
  background-color: initial;
}
:deep( .el-calendar-table td.is-selected) {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
:deep( .is-selected .date-content) {
  height: 28px;
  width: 28px;
  background-color: #37a4f2;
  color: #fff;
  border-radius: 50%;
  .rest {
    display: none;
  }
}
:deep(.current) {
  width: 28px;
  height: 28px;
}
:deep( .el-calendar-table tr td) {
  border: none;
  font-size: 12px;
  padding: 0;
  height: 100%;
  background-color: #fff;
}
:deep(.el-calendar-table thead th) {
  font-size: 12px;
}
#text {
  font-size: 12px;
}

.header {
  height: 40px;
  border-bottom: 1px solid #edeef2;
  position: relative;
  line-height: 40px;
  padding-left: 15px;
  // padding-top: 10px;
}
.active-header {
  font-size: 12px;
  padding: 10px 10px 0px 20px;
  color: #303133;
  & > span {
    margin-right: 20px;
    .block {
      display: inline-block;
      border-radius: 2px;
      width: 10px;
      height: 10px;
      // background-color: #f38f8f;
      margin-right: 10px;
    }
  }
}
.calendar-header-title {
  display: inline-block;
  position: absolute;
  right: 0;

  .year {
    color: rgb(181, 181, 181);
    font-weight: normal;
    font-size: 16px;
    margin: 0 5px;
  }
  .el-icon-arrow-left {
    color: rgb(181, 181, 181);
    font-size: 20px;
  }
  .el-icon-arrow-right {
    color: rgb(181, 181, 181);
    font-size: 20px;
  }
  .day {
    color: rgb(94, 148, 233);
    font-weight: normal;
    font-size: 16px;
    margin-left: 20px;
  }
}
// 小竖线图标
.vertical {
  display: inline-block;
  height: 14px;
  border-left: 3px solid #85a9f5;
  color: black;
  position: absolute;
  top: 14px;
  left: 6px;
  border-radius: 10px;
}
// 竖线后面的文本
.txt {
  font-size: 14px;
}
</style>
